<template>
<div class="all">
  <Header
    v-if="showAll === false"
    type="white"
    right_title="全部"
    @click-left="back"
    @click-right="clickAll"
    title="相互沟通">
  </Header>
  <Header
    v-else
    type="white"
    @click-left="showAll = false, getData('1')"
    title="全部">
  </Header>
  <van-index-bar
    v-if="dataList.length > 0"
    highlight-color="#1da4f2"
    :index-list="indexList">
    <div v-for="(item, index) in dataList" :key="index">
      <van-index-anchor :index="item.zimu" />
      <div class="divList"
         @click="clickP(curr)"
         v-for="(curr, i) in item.zimu_list" :key="i">
        <img v-if="curr.PHOTO"
             class="photo"
             :src="curr.PHOTO" alt="">
        <img v-else src="../../../../assets/photo.png"
             class="photo"
             alt="">
        &nbsp;
        &nbsp;
        <p>
          {{curr.user_name}}
        &nbsp;
        {{curr.sex == 1 ? '男' : '女'}}
        &nbsp;
        {{curr.age}}岁
        </p>
<!--        <div class="van-hairline&#45;&#45;bottom"></div>-->
      </div>
    </div>
  </van-index-bar>
  <van-empty
    style="width: 100%;height: 60%"
   v-else
    class="custom-image"
    description="暂无沟通列表~"
    :image="require('../../../../assets/空两本书.png')"
  >
<!--    -->
  </van-empty>
</div>
</template>

<script>
import Header from '../../../../components/Vue/Header'
import {Toast} from 'vant'
export default {
  name: 'TeamChatList',
  components: {
    Header
  },
  computed: {
    title () {
      if (this.showAll === true) {
        document.title = '全部'
      } else if (this.showAll === false) {
        document.title = '相互沟通'
      }
      return ''
    }
  },
  data () {
    return {
      team_id: this.$route.query.team_id,
      dataList: [],
      indexList: [],
      showAll: false
    }
  },
  mounted () {
    this.getData('1')
  },
  methods: {
    clickAll () {
      this.showAll = true
      this.getData()
    },
    clickP (item) {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler('doctorPatientChat', item.user_id + ',' + item.user_name + ',' + '-2' + ',' + '0', function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },
    getData (showType) {
      this.title
      this.$http.findPatients({
        team_id: this.team_id,
        showtype: showType,
        isSort: '1'
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            let data = res.data.data
            this.indexList = []
            this.dataList = []
            data.forEach((curr, index) => {
              let text = curr.type
              this.indexList.push(text.toUpperCase())
            })
            this.indexList = new Array(...new Set(this.indexList))
            this.indexList.forEach((item) => {
              let list = {
                zimu: item,
                zimu_list: []
              }
              data.forEach((curr, index) => {
                if (item === curr.type.toUpperCase()) {
                  list.zimu_list.push(curr)
                }
              })
              this.dataList.push(list)
            })
            console.log(this.dataList)
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
Header{
  position: sticky;
  top: 0;
}
.divList{
  width: 100%;
  height: 55px;
  padding: 0 15px;
  box-sizing: border-box;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  p{
    display: flex;
    align-items: center;
    height: 100%;
    flex: 2;
    border-bottom: 1px solid #E5E5E5;
  }
}
.photo{
  width: 37.5px;
  height: 37.5px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #E5E5E5;
}
</style>
